<template>
	<view class="selectAddress">
		<view class="empty" v-if="list.length <= 0">
			<image src="../../../static/img/addressEmpty.png" mode=""></image>
			<view class="word">暂未设置</view>
			<view class="word1">没有收货地址寄不了快递哦~</view>
			<view class="btn" @tap.stop="goAddNew">新增地址</view>
		</view>
		
		<view v-else>
			<view class="list scale-1px-bottom" v-for="(val,index) in list" :key = "index" @tap.stop="changeIndex(val,index)">
				<view class="iconfont icon-xuanzhong" style="color: #2291FF;"></view>
				<view class="cBox">
					<view class="addrBox">
						<text class="default" v-if="val.moren == 1">默认</text>
						<text class="addr">{{val.pro_name}}{{val.city_name}}{{val.area_name}}</text>
					</view>
					<view class="detailAddr">{{val.address}}</view>
					<view class="disFlex crteBox">
						<view>
							<text class="name">{{val.contacts}}</text>
							<text class="phone">{{val.phone}}</text>
						</view>
						<view>
							<text class="update" @tap.stop="goUpdate(val)">编辑</text>
							<text class="delete" @tap.stop="showDeletePop(val,index)">删除</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom"  v-if="list.length > 0">
			<button @tap.stop="goAddNew">新增地址</button>
		</view>
		<view class="canselBox" v-if="deletePop">
			<view class="cBox">
				<view class="title">确定要删除该地址吗？</view>
				<view class="crt">
					<view @tap="closeDeletePop()">取消</view>
					<view @tap="deleteOne()">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {
				list:[{moren:1,pro_name:'重庆',city_name:'重庆市',area_name:'渝中区',address:'xxx',contacts:'司法所科技开发',phone:135852521}],
				deletePop:false,
				dzId:'',
			}
		},
		onLoad() {

		},
		onShow () {
			this.query();
		},
		methods: {
			query () {
				// this.http('apicloud/Address/index','post',{}).then( res => {
				// 	if (res.status == 200) {
				// 		this.list = res.data;
				// 	}
				// })
			},
			deleteOne () {
				// let data = {
				// 	dz_id:this.dzId
				// };
				// this.http('apicloud/Address/del','post',data).then( res => {
				// 	if (res.status == 200) {
				// 		this.query();
				// 		this.deletePop = false;
				// 	}else {
				// 		uni.showToast({
				// 			icon:'none',
				// 			title:res.mess
				// 		})
				// 	}
				// })
			},
			goUpdate () {
				this.getnav(this.router(`updateAddress`));
				// this.getnav(this.router(`updateAddress?dz_id=${val.id}`));
			},
			goAddNew () {
				this.getnav(this.router(`addNewAddress`));
			},
			showDeletePop (val,index) {
				// this.dzId = val.id;
				this.deletePop = true;
			},
			closeDeletePop () {
				this.deletePop = false;
			},
			changeIndex (val,index) {
				// let data = {
				// 	dz_id:val.id
				// };
				// this.http('apicloud/Address/setmoren','post',data).then( res => {
				// 	if (res.status == 200) {
				// 		this.query();
				// 	}else {
				// 		uni.showToast({
				// 			icon:'none',
				// 			title:res.mess
				// 		})
				// 	}
				// })
			}
		}
	}
</script>

<style lang="less">
	.selectAddress{
		padding: 0 32rpx;
		padding-bottom: 100rpx;
		.empty{
			padding-top: 220rpx;
			text-align: center;
			image{
				width: 240rpx;
				height: 230rpx;
			}
			.word{
				margin-top: 50rpx;
				font-size: 32rpx;
				font-weight:bold;
				text-align: center;
			}
			.word1{
				text-align: center;
				color: #AAA;
				padding-top: 20rpx;
			}
			.btn{
				width:240rpx;
				height:66rpx;
				background:#2291FF;
				opacity:1;
				border-radius:33px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				margin: 0 auto;
				margin-top: 20rpx;

			}
		}
		.list{
			padding: 40rpx 0;
			display: flex;
			align-items: center;
			.cBox{
				flex: 1;
				padding-left: 40rpx;
				.addrBox{
					.default{
						width:60rpx;
						height:32rpx;
						background:#2291FF;
						border-radius:15px;
						color: #fff;
						font-size: 20rpx;
						margin-right: 14rpx;
					}
					.addr{
						
						font-size:24rpx;
						color:rgba(102,102,102,1);
					}
				}
				.detailAddr{
					font-weight:bold;
					color:rgba(0,0,0,1);
					padding-top: 20rpx;
				}
				.crteBox{
					margin-top: 20rpx;
					.name{
						font-size: 22rpx;
					}
					.phone{
						padding-left: 22rpx;
						font-size: 22rpx;
					}
					.update{
						color: #2291FF;
						font-size: 22rpx;
					}
					.delete{
						color: #999;
						font-size: 22rpx;
						padding-left: 30rpx;
					}
				}
			}
			
		}
		
		.bottom{
			position: fixed;
			width: 100%;
			height: 98rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 99;
			bottom: 0;
			left: 0;
			background-color: #fff;
			box-shadow:0px -3px 6px rgba(104,148,185,0.2);
			padding: 0 32rpx;
			button{
				background-color: #2291FF !important;
				font-size:36rpx;
				color: #fff;
				width:100%;
				height:88rpx;
				line-height: 88rpx;
				border-radius:5px;
			}
		}
		.canselBox{
			position: fixed;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 999;
			.cBox{
				height:300rpx;
				background:rgba(255,255,255,1);
				box-shadow:0px 0px 10px rgba(0,0,0,0.16);
				border-radius:10px;
				position: absolute;
				left: 40rpx;
				width: calc(100% - 80rpx);
				z-index: 9999;
				top: 50%;
				transform: translateY(-50%);
				.title{
					height: 200rpx;
					text-align: center;
					line-height: 200rpx;
					font-size:32rpx;
					font-weight:bold;
					color:rgba(51,51,51,1);
				}
				.crt{
					display: flex;
					align-items: center;
					height: 100rpx;
					border-top: 1px solid #eee;
					>view{
						font-size: 36rpx;
						flex: 1;
						text-align: center;
						line-height: 100rpx;
						&:first-child{
							border-right: 1px solid #eee;
						}
						&:last-child{
							color:#2291FF;
						}
					}
				}
			}
		}
		
		
	}
</style>
